import Taro from '@tarojs/taro-h5';
import Nerv from "nervjs";
import { View } from '@tarojs/components';
import { AtSearchBar, AtTabs, AtTabsPane } from "taro-ui";
import './find.scss';
export default class Find extends Taro.Component {
  constructor() {
    super();
    /**
     * 指定config的类型声明为: Taro.Config
     *
     * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
     * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
     * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
     */
    this.config = {
      navigationBarTitleText: '发现'
    };
    this.state = {
      value: '',
      current: 0
    };
    this.onChange = value => {
      this.setState({
        value: value
      });
    };
    this.onActionClick = () => {
      console.log('开始搜索');
    };
    this.handleClick = value => {
      this.setState({
        current: value
      });
    };
    this.state = {
      value: '',
      current: 0
    };
  }
  componentWillMount() {}
  componentDidMount() {}
  componentWillUnmount() {}
  componentDidShow() {}
  componentDidHide() {}
  render() {
    return <View className="index">
                <AtSearchBar actionName="搜2下" value={this.state.value} onChange={this.onChange.bind(this)} onActionClick={this.onActionClick.bind(this)} />
                <AtTabs current={this.state.current} scroll tabList={[{ title: '标签页1' }, { title: '标签页2' }, { title: '标签页3' }, { title: '标签页4' }, { title: '标签页5' }, { title: '标签页6' }]} onClick={this.handleClick.bind(this)}>
                    <AtTabsPane current={this.state.current} index={0}>
                        <View style="font-size:18px;text-align:center;height:100px;">标签页一的内容</View>
                    </AtTabsPane>
                    <AtTabsPane current={this.state.current} index={1}>
                        <View style="font-size:18px;text-align:center;height:100px;">标签页二的内容</View>
                    </AtTabsPane>
                    <AtTabsPane current={this.state.current} index={2}>
                        <View style="font-size:18px;text-align:center;height:100px;">标签页三的内容</View>
                    </AtTabsPane>
                    <AtTabsPane current={this.state.current} index={3}>
                        <View style="font-size:18px;text-align:center;height:100px;">标签页四的内容</View>
                    </AtTabsPane>
                    <AtTabsPane current={this.state.current} index={4}>
                        <View style="font-size:18px;text-align:center;height:100px;">标签页五的内容</View>
                    </AtTabsPane>
                    <AtTabsPane current={this.state.current} index={5}>
                        <View style="font-size:18px;text-align:center;height:100px;">标签页六的内容</View>
                    </AtTabsPane>
                </AtTabs>
            </View>;
  }
}